<script setup lang="ts">
import {getCurrentInstance, inject, onMounted, provide, ref, watch} from "vue";
import showBox from '@/view/activity/components/showBox.vue'
import cash from '@/view/activity/components/cashComp.vue'
import loadComponent from "@/view/activity/components/loading.vue";
import {showToast} from "vant";
const {proxy} = getCurrentInstance() as any; // 类似于this
let toBack=()=>{
  proxy.$router.go(-1)
}
const  toShowWin = ()=>{
  showWin.value = true
}
const  toCash = ()=>{
  showCash.value = true
}
let txt =  ref('1.提现前需绑定您的支付宝账号，用于接收提现款项。请确保所提供的支付宝账号与提现人本人姓名一致，以便顺利完成转账。  <br>' +
    '2.提现金额：本次提现为账户内余额的全部提现，不支持部分金额提现。  <br>' +
    '进入“提现”页面后，填写并确认您的真实姓名和已绑定的支付宝账号信息。提交提现申请后，本平台将在规定的工作日内对您的信息进行审核。 <br>' +
    '3.到账时间：审核通过后，款项将于约定的工作日内转入您提供的支付宝账号，实际到账时间以支付宝及相关金融机构的处理进度为准。  <br>' +
    '4.注意事项:为确保您的资金安全，请务必确保所提交的姓名、支付宝账号信息真实、有效且与提现人本人信息相符.若发现虚假信息、盗用他人账户等违规行为，本平台有权拒绝提现申请并采取相应措施。  <br>' +
    '5.如有疑问或需协助，请通过APP内客服渠道与我们联系。')
let title = ref('提现说明')
//规则组件
let showWin = ref(false)
//提现组件
let showCash = ref(false)
let loading = ref(false)
provide('loading',loading)
provide('txt',txt)
provide('title',title)
provide('showWin',showWin)
provide('showCash',showCash)
let myInfo = ref({
  balance:0,
  share_count	:0,
  share_vip_count	:0,
  draw_balance:0,
  invite_activity_record_1:1,
  invite_activity_record_2:1,
  invite_activity_record_3:1,
})
let getMyIncome = async () => {
  await proxy.$API.User.getMyIncome({token: localStorage.getItem('token')}).then(res => {
    loading.value = false
    myInfo.value =  res.result
    // myInfo.value.balance =  1

    // console.log(res,'1111')
  })
}
let getPrice = async (val,type)=>{
  if(val!=3){
    return
  }else {
    await proxy.$API.User.getPrice({token: localStorage.getItem('token'),activity:type}).then(res => {
      if(res.code==200){
        showToast('领取成功')
        getMyIncome()
      }else {
        showToast(res.remark)
      }
    })
  }
}
onMounted(() => {
  loading.value = true
  getMyIncome()
})
watch(showCash,(val)=>{
  if(!val){
    getMyIncome()
  }
})
</script>

<template>
    <div class="myIncome">
      <loadComponent></loadComponent>
      <showBox></showBox>
      <cash></cash>
      <img alt="" class="back" src="@/assets/images/activityImg/back.png" @click="toBack">
      <div class="rules" @click="toShowWin">
        提现说明
      </div>
      <div class="title"></div>
      <div class="head">已获现金：</div>
      <div class="getCash">
        <div class="left">
          <div class="txt">¥{{ myInfo.balance }}</div>
        </div>
        <div class="right" @click="toCash">
          <span>立即提现</span>
        </div>
      </div>
      <div class="box">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="img3">
          <div class="titles">
            <div class="item">邀请人数</div>
            <div class="item">开通任意会员</div>
            <div class="item">获得现金红包</div>
          </div>
          <div class="content">
            <div class="item">{{ myInfo.share_count }}</div>
            <div class="item">{{ myInfo.share_vip_count }}</div>
            <div class="item">¥{{ myInfo.draw_balance	 }}</div>
          </div>
        </div>
      </div>
      <div class="getPrice">
        额外 <span>奖励</span>
      </div>
      <div class="gg">
        <div class="icon"></div>
        <div class="left">
          <div class="p">额外奖励红包 <span>50¥</span>满 <span>10</span>人激活领取</div>
        </div>
        <div @click="getPrice(myInfo.invite_activity_record_1,1)" :class="myInfo.invite_activity_record_1==2?'right':'right2'">{{myInfo.invite_activity_record_1==1?'未激活':myInfo.invite_activity_record_1==2?'待领取':'已领取'}}</div>
      </div>
      <div class="gg">
        <div class="icon"></div>
        <div class="left">
          <div class="p">额外奖励红包 <span>200¥</span>满 <span>50</span>人激活领取</div>
        </div>
        <div @click="getPrice(myInfo.invite_activity_record_2,2)" :class="myInfo.invite_activity_record_2==2?'right':'right2'">{{myInfo.invite_activity_record_2==1?'未激活':myInfo.invite_activity_record_2==2?'待领取':'已领取'}}</div>
      </div>
      <div class="gg">
        <div class="icon"></div>
        <div class="left">
          <div class="p">额外奖励红包 <span>500¥</span>+ <span>30</span>张月卡兑换卷 </div>
          <div class="p">满 <span>100</span>人激活领取</div>
        </div>
        <div @click="getPrice(myInfo.invite_activity_record_3,3)" :class="myInfo.invite_activity_record_3==2?'right':'right2'">{{myInfo.invite_activity_record_3==1?'未激活':myInfo.invite_activity_record_3==2?'待领取':'已领取'}}</div>
      </div>
    </div>
</template>

<style scoped lang="scss">
.myIncome::-webkit-scrollbar {
  width: 0;
}

.myIncome {
  width: 375px;
  height: auto;
  font-size: 20px;
  background-color:#4957F5;
  background-image: url("@/assets/images/activityImg/bg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  position: relative;
  overflow: hidden;
  overflow-y: scroll;

  .back {
    width: 20px;
    height: 25px;
    position: absolute;
    left: 20px;
    top: 31px;
    z-index: 11;
  }
  .rules {
    width: 62px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    color: white;
    position: absolute;
    top: 32px;
    right: 24px;
    z-index: 11;
    background-size: 62px 24px;
    background-image: url("@/assets/images/activityImg/btm2.png");
    background-repeat: no-repeat;
  }
  .title {
    width: 118px;
    height: 29px;
    background-image: url("@/assets/images/myIncome/title.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 129px;
    top: 68px;
  }
  .head{
    width: 100%;
    height: 18px;
    margin-top: 133px;
    font-weight: 400;
    font-size: 24px;
    text-indent: 17px;
    color: #FEFEFE;
    line-height: 20px;
    text-shadow: 0 0 8px #1E3CD4;
  }
  .getCash{
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 23px;
    .left{
      width: 216px;
      height: 58px;
      background-image: url("@/assets/images/myIncome/left.png");
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: 216px 58px;
      font-family: txtP, sans-serif;;
      .txt {
        width: 100%;
        font-weight: 400;
        font-size: 44px;
        //color: #FFFFFF;
        //text-shadow: 0 0 0 #7A6BEA;
        background: linear-gradient(180deg, #F59A24 0%, #FDD250 47.9736328125%, #FA9716 100%);
        -webkit-background-clip: text;
        white-space: nowrap;
        -webkit-text-fill-color: transparent;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .right{
      width: 154px;
      height: 75px;
      background-image: url("@/assets/images/myIncome/right.png");
      background-repeat: no-repeat;
      background-size: 154px 75px;
      color: white;
      font-size: 18px;
      display: flex;
      font-weight: bolder;
      justify-content: center;
      align-items: center;
      span{
        margin-top: -6px;
      }
    }
  }
  .box{
    width: 357px;
    height: 235px;
    margin:  0 auto 15px;
    background-image: url("@/assets/images/myIncome/bg2.png");
    background-repeat: no-repeat;
    background-size: 357px 235px;
    position: relative;
    overflow: hidden;
    .img1{
      width: 194px;
      height: 36px;
      margin: 15px auto 13px;
      background-image: url("@/assets/images/myIncome/img1.png");
      background-repeat: no-repeat;
      background-size: 100% 100% ;
    }
    .img2{
      width: 294px;
      height: 34px;
      margin: 0 auto 17px;
      background-image: url("@/assets/images/myIncome/img2.png");
      background-repeat: no-repeat;
      background-size: 100% 100% ;
    }
    .img3{
      width:332px;
      height: 111px;
      margin: 0 auto 17px;
      background-image: url("@/assets/images/myIncome/img3.png");
      background-repeat: no-repeat;
      overflow: hidden;
      background-size: 100% 100% ;
      font-family: txtP, sans-serif;;
      .titles{
        width: 100%;
        height: 13px;
        display: flex;
        margin: 21px auto 20px;
        .item{
          font-weight: 400;
          font-size: 14px;
          color: #FEFEFE;
          line-height: 12px;
          text-align: center;
          flex:1
        }
      }
      .content{
        width: calc(100% - 28px);
        display: flex;
        padding: 0 14px;
        height: 46px;
        justify-content: space-between;
        .item{
          width: 94px;
          height: 46px;
          font-weight: 400;
          font-size: 21px;
          color: #FEFEFE;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: RGBA(74, 164, 255, 1);
          border-radius: 20px;
          line-height: 12px;
          text-align: center;
        }
      }
    }
  }
  .getPrice{
    width: 234px;
    height: 29px;
    color: white;
    margin: 0 auto 15px;
    font-family: black,"Niagara Engraved",sans-serif;
    background-image: url("@/assets/images/myIncome/p.png");
    background-repeat: no-repeat;
    background-size: 234px 29px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    span{
      color: rgba(0, 168, 255, 1);
    }
  }
  .gg{
    width: calc(327px - 30px - 8px);
    padding: 0 8px 0 30px;
    height: 43px;
    background-image: url("@/assets/images/myIncome/bg3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin:  0 auto 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    color: white;
    .icon{
      width: 84px;
      height: 89px;
      position: absolute;
      left: -34px;
      top: -27px;
      background-image: url("@/assets/images/myIncome/boon.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .left{
      width:203px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      font-family: txtP, sans-serif !important;
      .p{
        display: flex;
        align-items: center;
        width: 100%;
        span{
          color: rgba(253, 210, 80, 1);
          height: auto;
          white-space: nowrap;
        }
      }

    }
    .right{
      width: 60px;
      height: 28px;
      background-image: url("@/assets/images/myIncome/btm6.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 11px;
    }
    .right2{
      width: 60px;
      height: 28px;
      background-image: url("@/assets/images/myIncome/no.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 11px;
    }
  }
}
</style>
